<template>
  <!-- 客户管理 -->
  <div class="app-page">
    <el-tabs
      ref="customerManage"
      v-model="activeTabName"
      type="card"
      @tab-click="handleClickTab"
    >
      <el-tab-pane v-if="$hasTabPermission(20101)" label="正式客户" name="realCustomer">
        <real-csm-tab
          ref="realCustomer"
          :csm-lerel="csmLerel"
          :tree-data="treeData"
          :paymen-fil-list="paymenFilList"
          :calc-type-list="calcTypeList"
          :customer-type-map="customerTypeMap"
          :new-from-map="newFromMap"
          :csm-status="csmStatusMap"
          :csm-level-map="csmLevelMap"
          :csm-new-type-map="csmNewTypeMap"
          :warn-level-map="warnLevelMap"
          :acc-csmcard-card-status-map="accCsmcardCardStatusMap"
          :group-type-map="groupTypeMap"
          :sub-type-all-list="subTypeAllList"
        />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(20102)" label="注销客户" name="offCustomer">
        <off-csm-tab
          ref="offCsmTab"
          :csm-lerel="csmLerel"
          :tree-data="treeData"
          :customer-type-map="customerTypeMap"
          :new-from-map="newFromMap"
          :csm-status-map="csmStatusMap"
          :csm-level-map="csmLevelMap"
          :csm-new-type-map="csmNewTypeMap"
          :acc-csmcard-card-status-map="accCsmcardCardStatusMap"
          :sub-type-all-list="subTypeAllList"
        />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(20103)" label="客户组" name="csmGroup">
        <csm-group-tab ref="csmGroup" :customer-type-map="customerTypeMap" :csm-status-map="csmStatusMap" :group-status-map="groupStatusMap" :csm-new-type-map="csmNewTypeMap" :group-type-map="groupTypeMap" :sub-type-all-list="subTypeAllList" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import RealCsmTab from './components/RealCsmTab'
  import OffCsmTab from './components/OffCsmTab'
  import CsmGroupTab from './components/CsmGroupTab'
  import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'
  import { queryCsmLevelMap, querySubTypeMap, queryMap, queryRiskTrackMap } from '@/api'
  import getTreeData from '@/utils/jsonTree'
  import { mapGetters } from 'vuex'

  export default {
    name: 'customerManage',
    components: {
      RealCsmTab, OffCsmTab, CsmGroupTab
    },
    data() {
      return {
        activeTabName: 'realCustomer',
        treeData: [],
        customerTypeMap: [],
        newFromMap: [],
        csmStatusMap: [],
        csmLevelMap: [],
        csmNewTypeMap: [],
        accCsmcardCardStatusMap: [],
        calcTypeList: [], // 收款方式
        paymenFilList: [], // 支付方式
        warnLevelMap: [], // 隐患等级
        groupTypeMap: [],
        groupStatusMap: [], // 客户组状态
        csmLerel: 0,
        subTypeAllList: []
      }
    },
    computed: {
      ...mapGetters([
        'orgList'
      ])
    },
    async created() {
      await Promise.all([this.getTreeData(), this.queryOptionsMap(), this.getCsmLevelMap(), this.getCsmLevelMap(), this.getdanger()])
      // const info = { sn: 5, p5: 17704869005 }
      // this.$router.push({ name: 'phoneOrderDialog', params: { id: info.p5, phone: info.p5, sn: info.sn } })
      // setTimeout(() => {
      //   const info = { sn: 5, p5: 17704869001 }
      //   this.$router.push({ name: 'phoneOrderDialog', params: { id: info.p5, phone: info.p5, sn: info.sn } })
      // }, 5000)
      // setTimeout(() => {
      //   const info = { sn: 5, p5: 17704869002 }
      //   this.$router.push({ name: 'phoneOrderDialog', params: { id: info.p5, phone: info.p5, sn: info.sn } })
      // }, 10000)
      // setTimeout(() => {
      //   const info = { sn: 5, p5: 17704869003 }
      //   this.$router.push({ name: 'phoneOrderDialog', params: { id: info.p5, phone: info.p5, sn: info.sn } })
      // }, 15000)
      // setTimeout(() => {
      //   const info = { sn: 5, p5: 17704869001 }
      //   this.$router.push({ name: 'phoneOrderDialog', params: { id: info.p5, phone: info.p5, sn: info.sn } })
      // }, 30000)
      // setTimeout(() => {
      //   const info = { sn: 5, p5: 17704869005 }
      //   this.$router.push({ name: 'phoneOrderDialog', params: { id: info.p5, phone: info.p5, sn: info.sn } })
      // }, 35000)
    },
    mounted() {
      this.activeTabName = this.$refs.customerManage.panes.length > 0 ? this.$refs.customerManage.panes[0].name : ''
      this.$watch('activeTabName', (val, oldval) => {
        if (val === 'realCustomer') {
          this.$refs.realCustomer.fetchData({ currentPage: 1, pageSize: 20 })
        }
        if (val === 'offCustomer') {
          this.$refs.offCsmTab.fetchData({ currentPage: 1, pageSize: 20 })
        }
        if (val === 'csmGroup') {
          this.$refs.csmGroup.fetchData({ currentPage: 1, pageSize: 20 })
        }
      })
    },
    methods: {
      // 获取所属机构数据
      async getTreeData() {
        const data = this.orgList.map(item => ({
          label: item.name,
          ...item
        }))
        this.treeData = getTreeData(data)
      },
      _getQuery(obj) {
        const query = {}
        for (const key in obj) {
          if (obj.hasOwnProperty(key)) {
            if (obj[key] !== '') {
              query[key] = obj[key]
            }
          }
        }
        return query
      },
      // 查询枚举
      async queryOptionsMap() {
        const [res, res1, res2, res3, res4, res5, res6, res7, res8, res9] = await Promise.all([
          querySubTypeMap({}),
          mergeAsyncFunc(queryMap, { enumName: 'CustomerType' }),
          mergeAsyncFunc(queryMap, { enumName: 'CustomerFromPlat' }),
          mergeAsyncFunc(queryMap, { enumName: 'CustomerStatus' }),
          mergeAsyncFunc(queryMap, { enumName: 'CustomerNewType' }),
          mergeAsyncFunc(queryMap, { enumName: 'AccCsmcardCardStatus' }),
          mergeAsyncFunc(queryMap, { enumName: 'CalcType' }),
          mergeAsyncFunc(queryMap, { enumName: 'PaymentMethod' }),
          mergeAsyncFunc(queryMap, { enumName: 'CsmGroupType' }),
          mergeAsyncFunc(queryMap, { enumName: 'CustomerGroupStatus' })])
        this.subTypeAllList = res.data // 用气性质
        this.customerTypeMap = res1.data // 客户类型
        this.newFromMap = res2.data // 客户来源
        this.csmStatusMap = res3.data.filter((item) => item.value !== 0) // 客户状态去掉‘暂存’
        this.csmNewTypeMap = res4.data // 开户类型
        this.accCsmcardCardStatusMap = res5.data // 充值卡状态
        this.calcTypeList = res6.data // 收款方式
        // 过滤支付方式
        const arr = ['现金', '微信支付', '支付宝', '银行支付']
        res7.data.filter(item => {
          if (arr.includes(item.desc)) {
            this.paymenFilList.push(item)
          }
        })
        this.groupTypeMap = res8.data // 客户组类型
        this.groupStatusMap = res9.data // 客户组状态类型
      },
      // 查询客户等级枚举
      async getCsmLevelMap() {
        const res = await mergeAsyncFunc(queryCsmLevelMap)
        this.csmLevelMap = JSON.parse(res.data.customerQuality)
        this.csmLerel = Number(res.data.csmLerel)
      },
      // 查询隐患等级
      async getdanger() {
        // presetDicQueryList
        const res = await queryRiskTrackMap()
        const data = JSON.parse(res.data.warnLevel) // 隐患等级
        if (data) {
          this.warnLevelMap = []
          data.forEach(item => {
            this.warnLevelMap.push({
              value: item.keyVal,
              desc: item.keyName
            })
          })
          // console.log(this.warnLevelMap)
        }
      },
      handleClickTab(tab) {
      }
    }
  }
</script>

<style lang="scss" scoped>
.app-page {
  padding: 0;
  margin: 0;
  /deep/.el-tabs__header {
    margin: 0 0 10px;
  }
}
</style>
